<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-image style="width: 100px; height: 150px"
          :src="userInfo.avatar"
          fit="fit">
        </el-image>
      </el-col>
      <el-col :span="9" class="user-col">
        <div>姓名：{{ userInfo.username }}</div>
        <div>年龄：{{ userInfo.age }}</div>
        <div>性别：{{ userInfo.sex }}</div>
        <div>电话：{{ userInfo.mobile }}</div>
        <div>身份：{{ userInfo.roleType }}</div>
      </el-col>
      <el-col :span="9" class="user-col">
        <div>ID: {{ userInfo.id }}</div>
        <div>企业微信：</div>
        <div>
          <el-image style="width: 100px; height: 100px"
            :src="userInfo.bizQrcode"
            fit="fit">
          </el-image>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" class="user-col">
        <div>我的定位：{{ userInfo.local }}</div>
        <div>我的地址：{{ userInfo.address }}</div>
        <div>接单类型：{{ userInfo.orderTakeType }}</div>
        <div>我的技能：{{ userInfo.skillType }}</div>
      </el-col>
      <el-col :span="12" class="user-col">
        <div>实名认证：{{ userInfo.isRealName }}</div>
        <div>保障金：{{ '--' }}</div>
        <div>我的钱包：{{ userInfo.earnCount }}</div>
        <div>接单数：{{ userInfo.orderTakeCount }}</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">证件照片：</el-col>
      <el-col :span="20">
        <el-image style="width: 100px; height: 100px"
          v-for="(item, index) in currImageList"
          :src="item"
          fit="fit"
          :key="index"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getStringList } from '@/utils';

export default {
  name: 'userDetailInfo',
  props: {
    userInfo: {},
    currImageList: []
  },
  mounted() {
    this.getImageList();
  },
  methods: {
    getImageList() {
      const str = this.userInfo.idcard;
      this.currImageList = str && getStringList(str);
    }
  }
}
</script>
<style scoped>
.grid-content {
  background: red;
}
.user-col div{
  margin-bottom: 10px;
}
.user-col a{
  color: #409eff;
  text-decoration: underline;
}
</style>